<template>
  <div class="studentPersonInfo">
    <!-- avatar upload -->
    <el-upload
      class="avatar-uploader"
      v-loading.fullscreen.lock="fullscreenLoading"
      :action="this.$until.url+'/baseInfoCommon/uploadPhoto'"
      name="photo"
      :on-progress="uploading"
      :show-file-list="false"
      :on-success="handleAvatarScucess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <!---->
    <el-form ref="form" :model="form" label-width="80px" class="content fixed-form">
      <el-form-item label="学号">
        <el-input v-model="form.studentId"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.studentName"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.studentSex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生年月">
        <el-col>
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.studentBirth"
            style="width: 100%;"
            @change="getDate">
          </el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="班级">
        <el-select
          class="full-line"
          v-model="form.classId"
          filterable
          remote
          clearable
          placeholder="请选择班级名称">
          <el-option
            v-for="item in classChoose"
            :label="item.className"
            :value="item.classId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职务">
        <el-select v-model="form.studentJob" placeholder="请选择职务" class="full-line">
          <el-option label="学生" value="学生"></el-option>
          <el-option label="班长" value="班长"></el-option>
          <el-option label="团委" value="团委"></el-option>
          <el-option label="学委" value="学委"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="银行卡号">
        <el-input v-model="form.bankCard"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="form.IdNum"></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.studentEmail"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style>
  .content {
    width: 960px;
    margin: 20px auto 10px;
  }
</style>
<script>
  import AvatarUpload from '../fileUpload/avatarUpload'
  export default{
    name: 'studentPersonInfo',
    data(){
      return {
        form: {
          studentId: '',
          studentName: '',
          studentSex: '',
          studentBirth: '',
          classId: '',
          studentJob: '',
          bankCard: '',
          IdNum: '',
          studentPhoto: '',
          phone: '',
          studentEmail: ''
        },
        classChoose: [],
        fullscreenLoading: false,
        dialogVisible: false,
        imageUrl: '',
        oldStudentId: '',
      }
    },
    components: {},
    mounted: function () {
      this.$nextTick(function () {
        this.init();
      })
    },
    methods: {
      init(){
        //this.oldStudentId = this.$route.params.studentId;
        this.oldStudentId = '001';
        this.getClassInfo();
        this.getStudentInfo();
      },
      //avatar upload
      handleAvatarScucess(res, file) {
        this.form.studentPhoto = res.picturePath;
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      //upload
      uploading: function () {
        this.fullscreenLoading = false;
      },
      getClassInfo(){
        this.$http.get(this.$until.url + '/baseInfoCommon/getClassNameAndId').then(response => {
          this.classChoose = response.body
        }, response => {
          console.log('文件获取失败');
        });
      },
      getStudentInfo(){
        this.$http.get(this.$until.url + '/personInfo/getStudentInfo'
          ).then(response => {
          var msg = response.body.stuList[0];
          for (var key in msg) {
            this.form[key] = msg[key]
          }
          this.imageUrl = this.$until.url + '/' + response.body.stuList[0].studentPhoto;
        }, response => {
          console.log('服务器异常')
        });
      },
      onSubmit() {
        this.$http.post(this.$until.url + '/studentBaseInfo/updateStudent', this.form,
          {
            params: {
              oldStudentId: this.form.studentId
            },
            emulateJSON: true
          }).then(response => {
          this.$message({
            message: response.body.message,
            type: 'success'
          });
          this.$router.replace({path: '/StudentBaseInfo'});
        }, response => {
          console.log('文件获取失败');
        });
      },
      getDate(val){
        this.form.studentBirth = val
      }
    }
  }
</script>
